<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>练习</title>
	<script src="js/jquery.js"></script>
	<style>
	*{
		margin:0;
		padding:0;
	}
		#box{
			height:500px;
			width:580px;
			background:pink;
			margin:0 auto;
			position:relative;
		
		}
		ul{
			height:500px;
			width:500px;
			margin:0 auto;
			overflow:hidden;
			position:relative;

		}
		li{
			height:500px;
			width:500px;
			list-style:none;
			float:left;
			position:absolute;
		}
		img{
			height:500px;
			width:500px;
		}
		.btn1{
			text-decoration:none;
			position:absolute;
			display:block;
			left:0;
			top:50%;
			font-size:30px;
			width:30px;
			height:30px;
			line-height:30px;
			text-align:center;
		}
		.btn2{
			width:30px;
			height:30px;
			line-height:30px;
			text-decoration:none;
			position:absolute;
			display:block;
			font-size:30px;
			right:0;
			top:50%;
			text-align:center;
		}
	</style>
	<script>
	$(function(){
		var Oli=$("ul li")
		i=0;
		$(".btn1").click(function(){
			if(i>=4){
				i=0;
			}
			console.log(i)
			i++;
			Oli.eq(i).stop(true).animate({
			left:-500*i+"px"
			},500);
	
		})

	})

	</script>
</head>
<body>
	<div id="box">
		<ul>
			<li><a href="javascript:;"><img src="img/1.jpg" alt=""></a></li>
			<li><a href="javascript:;"><img src="img/2.jpg" alt=""></a></li>
			<li><a href="javascript:;"><img src="img/3.jpg" alt=""></a></li>
			<li><a href="javascript:;"><img src="img/4.jpg" alt=""></a></li>
		</ul>
		<a href="javascript:;" class="btn1 btn"><</a>
		<a href="javascript:;" class="btn2 btn">></a>

	</div>
</body>
</html>